<template>
    <el-breadcrumb :separator="separator" class="breadcrumb-wrap">
        <el-breadcrumb-item v-if="!showReturn"></el-breadcrumb-item>
        <el-breadcrumb-item v-if="showUser">user</el-breadcrumb-item>
        <el-breadcrumb-item
            v-for="(bread, index) in breadcrumbList"
            :key="bread.resourceId"
            @click.native="handleBreadChange(bread, index)"
        >
            <span class="cursor">{{bread.name}}</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item v-if="!showReturn"></el-breadcrumb-item>
    </el-breadcrumb>
</template>
<script>
export default {
    name: 'breadcrumb',
    props: {
        breadcrumbList: {
            type: Array,
            default: []
        },
        separator: {
            type: String,
            default: '/'
        },
        showReturn: {
            type: Boolean,
            default: false
        },
        showUser: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        handleBreadChange(bread, index) {
            this.$emit('change', bread, index)
        }
    }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';
    .breadcrumb-wrap {
        margin: 20px 0;

        .el-breadcrumb__item {
            font-size: 18px; 
        }

        .root {
            cursor: not-allowed;
        }

        .cursor {
            color: $blue;
            cursor: pointer;
            font-weight: 500
        }
    }
</style>
